<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            background-color: white;
            border: none;
            font-size: 16px;
        }
        button.active{
            color: greenyellow; 
        }
        img{
            width: 12px;
        }
        ul{
            margin-top: 10px;
        }
        li{
            list-style: none;
            font-size: 16px;
            vertical-align: middle;   
        }
        li span{
            /* display: block; */
            /* margin-left: 10px; */
            font-size: 14px;
        }
    </style>
</head>
<body>
    <button>视频</button>
    <button>直播</button>
    <div class="content">
        <ul>
            <!-- <li><img src="./icon_rb07b0ngqge/bofang.png" alt="">&emsp;<span>邓三岁只有三岁</span></li> -->
        </ul>
    </div>
</body>
</html>
<script>
    //hash路由
    // 思路:监听url地址栏的改变,思路:用hashchange事件,监听url地址中hash值的变化hashchange的回调函数就会执行,在回调函数内部就会获取最新hash的值,使用switch语句做判断
    // hash路由


    // 2.history
    var routes = [
        {path:'#/video',component: video_page},
        {path:'#/live',component:live_page}
    ]

    var btns = [...document.querySelectorAll('button')];
        btns.forEach((item, index) => {
            item.onclick = function (e) {
                e.preventDefault();
                //调用history.pushState() 添加一个新的历史记录( 同时实现路由地址的切换 )
                history.pushState({}, '', routes[index].path)
                routes[index].component();
                for (let j = 0; j < btns.length; j++) {
                    btns[j].classList.remove('active')
                }
                btns[index].classList.add('active')  
            }
        })
    
   
    function video_page(){
        document.querySelector('.content').innerHTML=`<li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>邓三岁只有三岁</span></li>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>邓三岁夜旅人收视长虹</span></li>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>邓北北强势会归</span></li>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>邓庄庄</span></li>`
    }
    function live_page(){
        document.querySelector('.content').innerHTML=`<li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>极限挑战</span>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>香蜜沉沉烬如霜</span></li>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>加油,你是最棒的</span></li>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>一千零一夜</span></li>
        <li><img src="./icon_rb07b0ngqge/bofang.png" alt=""><span>晴雅集</span></li>`
    }
</script>